import React, { PureComponent, Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Button, Checkbox, Icon } from 'antd';

import Demo3 from './demo32';

import styles from './demo3.less';

const FormItem = Form.Item;

// 2 个装饰器;
// 1. connect 负责指向当前组件的 props.demos 属性到 state.demos
// 2. Form.create() 把组件表单化，添加了一些方法，属性等;
@connect(state => ({
  demos: state.demos,
}))
@Form.create()
export default class ReactDemo4 extends PureComponent {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Recevied values of form', values);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Row gutter={16}>
        <Col span={12}>
          <Card title="表单提交">
            <Form className={styles.myForm} onSubmit={this.handleSubmit}>
              <FormItem>
                {
                  getFieldDecorator('username', {
                    rules: [{ required: true, message: '请输入用户名' }],
                  })(
                    <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />
                  )
                }
              </FormItem>
              <FormItem>
                {
                  getFieldDecorator('password', {
                    rules: [{ required: true, message: '请输入密码' }],
                  })(
                    <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
                  )
                }
              </FormItem>
              <FormItem>
                {
                  getFieldDecorator('remember', {
                    valuePropName: 'checked',
                    initialValue: true,
                  })(
                    <Checkbox>Remember me</Checkbox>
                  )
                }
                <a className="login-form-forgot" href="">Forgot password</a>
                <div>
                  <Button type="primay" htmlType="submit" className="login-form-button">Log in</Button>
                </div>
                Or <a href="">立即注册</a>
              </FormItem>
            </Form>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="其他测试">
            <Demo3 />
          </Card>
        </Col>
      </Row>
    );
  }
}
